window.addEventListener('load', function () {
    var config = {
        vx: 4,	//小球x轴速度,正为右，负为左
        vy: 4,	//小球y轴速度
        height: 2,	//小球高宽，其实为正方形，所以不宜太大
        width: 2,
        count: 200,		//点个数
        color: "C3C3C3", 	//点颜色
        stroke: "EDEDED", 		//线条颜色
        dist: 6000, 	//点吸附距离
        e_dist: 20000, 	//鼠标吸附加速距离
        max_conn: 10 	//点到点最大连接数
    }

    //调用
    CanvasParticle(config);



    // 功能二

    let data = [
        { "times": 4000, "price": 1200, "unitPrice": "0.3000" },
        { "times": 8000, "price": 2000, "unitPrice": "0.2500" },
        { "times": 40000, "price": 8000, "unitPrice": "0.2000" }
    ]


    //拼接结构，并放到指定位置
    data.forEach(function (v) {
        getEle('#selectBox').innerHTML += `
        <li class='items'>${v.times}次</li>
        `
    });
    //动态绑定第一个次数的li
    getEles('#selectBox li')[1].className = 'active';

    let lis = getEles('#selectBox li:not(:first-child)');

    //2.遍历注册事件
    lis.forEach(function (v, i) {
        //3.注册点击事件
        v.addEventListener('click', function () {
            //先清除所有items上的类名
            lis.forEach(function (v) {
                v.classList.remove('active');
            });
            //3.2给当前点击的li添加类名
            v.classList.add('active');

            //3.3把当前li对应的数据添加到指定 价格和次数的位置
            getEle('#pricebox').innerHTML = `&yen;${data[i].price}`;
            getEle('#priceTime').innerHTML = `${data[i].unitprice}`;
        })
    });

    function boxtable(param, params, table, tables) {

        let tabLis = getEles('#tab li');
        let tabCont = getEles('.left-box>div');


        /* 遍历菜单注册点击事件 */
        tabLis.forEach(function (v, i) {

            v.addEventListener('click', function () {
                tabLis.forEach(function (v, i) {
                    v.classList.remove('active');
                    tabCont[i].classList.remove('on')
                });
                v.classList.add('active');
                tabCont[i].classList.add('on')
            })

        });
    }

    boxtable('#tab li', 'active', '.left-box > div', 'on');
})




